<template>
	<view class="vip-container">
		<view class="head">
			<view class="flex">
				<view class="avatar-box">
					<image class="avatar-img" mode="aspectFit" src="/static/images/test.jpeg"></image>
				</view>
				<view class="user">
					<view class="fontB">{{userInfo.nickName}} <span class="grey">({{userInfo.id}})</span> </view>
					<view class="fontA">{{tips}}</view>
				</view>
			</view>
		</view>
		<!-- vip列表 -->
		<view class="list">
			<view class="item" v-for="(item,index) in vipData" :key="item.id" @click="selectVip(item,index)"
				:class="{'active':curIndex==index}">
				<view class="top">
					<view class="left">
						<view class="name">
							{{item.name}}
						</view>
						<view class="down">
							下载次数：{{item.download}}次
						</view>
					</view>
					<view class="gold">
						{{item.amount}}
					</view>
				</view>
				<view class="bottom down">
					有效期：{{item.time}} 天
				</view>
			</view>
		</view>
		<!-- 购买按钮 -->
		<button class="btn" shape="circle" @click="goBuy">确认购买{{curGold}}</button>
		<tui-modal :show="modal" @click="handleClick" title="" :content="confirmGold" shape="circle"></tui-modal>
		<tui-toast ref="toast"></tui-toast>
	</view>
</template>

<script>
	import {
		vipList,
		payVip
	} from '@/api/user'
	export default {
		data() {
			return {
				userInfo: {},
				vipData: [{}],
				curIndex: 0,
				curGold: 0,
				curId: 0,
				modal: false,
				confirmGold: '确认支付吗？',
				tips: '你还不是vip用户,开通福利多多',

			}
		},
		onLoad() {
			// console.log(123,this.$store.state.user.user);
			this.$store.dispatch('getUser')
			this.userInfo = this.$store.state.user.user
			if (this.userInfo.vip) {
				this.tips = 'VIP' + this.userInfo.vip
				// this.curIndex
			}
			this.getVipList()
		
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/user/openVip/logList'
			})
		},
		onShow() {

		},
		methods: {
			// 是否来自“我的”页面
			isFromMyPage() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					const currentPage = pages[pages.length - 1];
					const fromPage = pages[pages.length - 2];

					if(fromPage.route=='pages/user/index'){
						return true
					}else{
						return false
					}
				} 
			},
			getVipList() {
				vipList().then(res => {
					// const {vipRows} = res.data
					this.vipData = res.data
					this.curGold = res.data[0].amount
					this.curId = res.data[0].id
				})
			},
			selectVip(item, index) {
				this.curIndex = index
				this.curId = item.id
				this.curGold = item.amount

			},
			goBuy() {
				this.confirmGold = `确认支付${this.curGold}购买VIP会员吗？`
				this.modal = true
			},
			handleClick(e) {
				let index = e.index;
				if (index) this.confirmPay()
				this.hideModal();
			},
			confirmPay() {
				payVip({
					id: this.userInfo._id,
					vipid: this.curId
				}).then(res => {
					uni.setStorageSync('infinite', true)
					uni.$emit('updateUserInfo', true);
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					// 如果不是从'我的'页面过来，即从其他页面过来的，跳转回去要关闭MyUseOut弹框
					if(!this.isFromMyPage()){
						uni.$emit('closeModal',false)
					}
					setTimeout(() => {
						uni.navigateBack()
					}, 500)

				})


			},
			showToast(e) {
				let params = {
					title: "支付成功",
					icon: ''
				}
				this.$refs.toast && this.$refs.toast.show(params);
			},
			//隐藏组件
			hideModal() {
				this.modal = false;
			},
		},

	}
</script>

<style lang="scss" scoped>
	.vip-container {
		padding: 20rpx;

		.avatar-img {
			width: 60px;
			height: 60px;
			/* 将图片的边框半径设置为宽度和高度的一半，使其呈现圆形 */
			border-radius: 50%;
			/* 确保图片完全填充容器 */
			object-fit: cover;
		}


		.head {
			// padding-top: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.avatar-box {
				margin-right: 20rpx;
			}

			.flex {
				display: flex;
				align-items: center;

				.fontB {
					font-weight: bold;
					font-size: 30rpx;
					margin-bottom: 6rpx;

					.grey {
						font-size: 26rpx;
						color: #a6a6a6;
					}
				}

				.fontA {
					color: #a6a6a6;
					font-size: 24rpx;
				}
			}


		}

		.list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;

			.active {
				box-shadow: 0 0 10rpx var(--thorui-color-pink);
			}

			.item {
				border: 1px solid var(--thorui-color-pinks);
				padding: 30rpx;
				border-radius: 20rpx;

				margin-bottom: 20rpx;

				.top {
					display: flex;
					justify-content: space-between;
				}

				.name {
					font-size: 36rpx;
					font-weight: bold;
				}

				.gold {
					font-size: 80rpx;
					font-weight: bold;
					color: var(--thorui-color-pink);
				}

				.down {
					color: #a6a6a6;
					margin-top: 10rpx;
					font-size: var(--title-size);
				}
			}
		}

		.btn {
			margin-top: 20rpx;
			background: var(--thorui-color-pink) !important;
			color: #ffffff !important;
			border-radius: 45rpx;
		}
	}
</style>